<template>
    <div class="eachart-box">
        <div id="map-box" style="height:100%;width:100%;"></div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import china from 'echarts/map/js/china.js'
    export default {
      name: '',
      data(){
        return {
          myChart: ''
        }
      },
      props: ['sevenDate', 'sevenDay'],
      mounted(){
        var that = this;
        this.$nextTick(function() {
            that.myChart = echarts.init(document.getElementById('map-box'));
            that.initData();
        })
      },
      methods: {
        initData(){
            const option = {
                series: [{
                    type: 'map',
                    map: 'china',
                    selectedMode : 'multiple',
                    mapLocation: {
                        x: 'left'
                    },
                    dataRange: {
                        orient: 'horizontal',
                        min: 0,
                        max: 55000,
                        text:['高','低'],          
                        splitNumber:0
                    },
                    toolbox: {
                        show : true,
                        orient: 'vertical',
                        x:'right',
                        y:'center',
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false}
                        }
                    },
                    data:[
                        {name:'西藏', value:605.83},
                        {name:'青海', value:1670.44},
                        {name:'宁夏', value:2102.21},
                        {name:'海南', value:2522.66},
                        {name:'甘肃', value:5020.37},
                        {name:'贵州', value:5701.84},
                        {name:'新疆', value:6610.05},
                        {name:'云南', value:8893.12},
                        {name:'重庆', value:10011.37},
                        {name:'吉林', value:10568.83},
                        {name:'山西', value:11237.55},
                        {name:'天津', value:11307.28},
                        {name:'福建', value:17560.18},
                        {name:'上海', value:19195.69},
                        {name:'湖北', value:19632.26},
                        {name:'湖南', value:19669.56},
                        {name:'四川', value:21026.68, selected:true},
                        {name:'辽宁', value:22226.7},
                        {name:'河北', value:24515.76},
                        {name:'河南', value:26931.03},
                        {name:'浙江', value:32318.85},
                        {name:'山东', value:45361.85},
                        {name:'江苏', value:49110.27},
                        {name:'广东', value:53210.28}
                    ]
                }]
            };
            this.myChart.setOption(option);
        }
      },
      watch: {
          sevenDate: function (){
              this.initData()
          },
          sevenDay: function (){
              this.initData()
          }
      }
    }
</script>

<style lang="less" scoped>
    .eachart-box{
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
</style>
